<template>
    <div class="wrap">
        <img
            @click="prev"
            src="@/assets/img/components/left_red@2x.png"
            class="left"
            alt="left">
        <el-carousel
            @change="carouselChange"
            ref="carousel"
            :autoplay="false"
            arrow="never"
            indicator-position="none" 
            height="385px">
            <el-carousel-item 
                v-for="item in indicators" 
                :key="item"
                class="item">
                <div class="itemInner" >
                    <div 
                        class="itemFlexItem" 
                        v-for="(el,idx) in showImgs" 
                        :key="el.name"
                        @click="itemClick(el)"
                        @mouseover="setCoverIndex(idx)"
                        @mouseleave="coverIdx=null">
                        <img 
                            v-src="{src:el.link[0],height:280,width:318}"
                            :alt="el.name" 
                            v-if="!calcTypeIsMp4(el.link[0])"/>
                        <video :src="el.link[0]" controls v-else :poster="videoCovers[idx]"/>
                        <p>{{el.name}}</p>
                        <template v-if="showCover && coverIdx === idx">
                            <div class="cover">
                                <div class="top">
                                    <img src="@/assets/img/components/logo_5@2x.png"/>
                                </div>
                                <div class="bottom">
                                    <p>{{el.name}}</p>
                                    <div class="border"></div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>
        <div class="indicator">
            <div 
                v-for="(item,i) in indicators" 
                :key="item"
                @click="idx = i" 
                :class="idx===i?'active':''"
                class="indicatorItem"></div>
        </div>
        <img
            @click="next"
            src="@/assets/img/components/right_red@2x.png"
            class="right" 
            alt="right">
    </div>
</template>

<script>
export default {
    props:["swipers","showCover"],
    data(){
        return {
            idx:0,
            coverIdx:null
        }
    },
    computed:{
        showImgs(){
            const _swipers = JSON.parse(JSON.stringify(this.swipers));
            const newArr = _swipers.slice(this.idx*4,this.idx*4+4);
            return newArr;
        },
        indicators(){
            const len =  Math.ceil(this.swipers.length/4);
            return len;
        },
        $itemCover(){
            return this.$slots.itemCover;
        },
        videoCovers(){
            const result = [];
            for (let index = 0; index < 10; index++) {
                result.push(require(`@/assets/img/videoCover/v${index+1}.png`))
            }
            return result;
        }
    },
    mounted(){
        console.log(this.showCover)
    },
    methods:{
        prev(){
            this.$refs.carousel.prev();
        },
        next(){
            this.$refs.carousel.next();
        },
        carouselChange(i){
            this.idx = i;
        },
        setCarouselIdx(i){
            this.$refs.carousel.setActiveItem(i);
        },
        calcTypeIsMp4(file) {
            if(!file) return;
            const idx = file.toString().lastIndexOf('.');
            const newString = file.substr(idx+1,)
            return newString === 'mp4';
        },
        setCoverIndex(idx){
            this.coverIdx = idx;
        },
        itemClick(item){
            this.$emit(`itemClick`,item);
        }
    }
}
</script>

<style lang="less" scoped>
.wrap {
    position: relative;
    .left,.right {
        position: absolute;
        top: 50%;
        margin-top: -24px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        cursor: pointer;
    }
    .left {
        left: -68px;
    }
    .right {
        right: -68px;
    }
    .indicator {
        display: flex;
        margin: 30px 0;
        justify-content: center;
        .indicatorItem {
            width: 16px;
            height: 16px;
            border-radius: 16px;
            background-color: #ccc;
            margin-right: 16px;
            transition: all .3s linear;
            cursor: pointer;
        }
        .active {
            width: 32px;
            background-color: #F42525;
        }
    }
}
.item {
    .itemInner {
        display: flex;
        box-sizing: border-box;
        border-bottom:1px solid rgba(220,220,221,1);
        .itemFlexItem {
            flex: 0 0 25%;
            border:1px solid rgba(220,220,221,1);
            box-sizing: border-box;
            overflow: hidden;
            position:relative;
            cursor:pointer;
            &:hover {
                
            }
            &>img {
                height: 280px;
                cursor: pointer;
                position: relative;
            }
            video {
                width: 100%;
                height: 280px;
            }
            &>p {
                box-sizing: border-box;
                background:rgba(255,255,255,1);
                // border-left:1px solid rgba(220,220,221,1);
                line-height: 99px;
                font-size:20px;
                font-weight:400;
                color:rgba(51,51,51,1);
            }
        }
    }
}
.cover {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.5);
    transition:all .3s linear;
    .top {
        align-items:center;
        display:flex;
        justify-content:center;
        height:280px;
        &>img {
            width:112px;
            height:84px;

        }
    }
    .bottom {
        height:100px;
        background-color:#D73A42;
        position:relative;
        &>p {
            background-color:transparent;
            color:#fff;
            font-size:20px;
            font-weight:400;
            line-height:94px;
        }
        .border {
            height:6px;
            background-color:#1B75BD;
            position:absolute;
            bottom:0;
            left:0;
            width:100%;
        }
    }
}
</style>